<template>
	<view @click.prevent.stop class="layout-main" :class="{ expire: expire, transform: isTransform }">
		<view :key="index" v-for="(item, index) in tabsList" @click="clickSingleTabs(item)" class="layout-main-item">
			<image :src="item.icon" />
			<text>{{ item.label }}</text>
		</view>

		<!-- 客服 -->
		<DistributionService v-model="isPopup" />
	</view>
</template>

<script>
import { debounce } from 'lodash';
import DistributionService from '@/components/distributionService';

const tabsList = Object.freeze([
	{
		label: '首页',
		icon: require('@/static/detail/icon_xqy_front page.png'),
		callBack: () => {
			uni.switchTab({
				url: '/pages/tabBar/Index'
			});
		}
	},
	{
		label: '客服',
		icon: require('@/static/detail/icon_xqy_service.png'),
		callBack: function () {
			this.isPopup = true;
		}
	}
]);

export default {
	name: 'ProductDetailTabs',

	props: {
		isExpire: {
			type: Number,
			default: 0
		}
	},

	data() {
		return {
			tabsList,

			isPopup: false,
			isTransform: false,
			debounced: debounce((e) => {
				this.isTransform = false;
			}, 350)
		};
	},

	computed: {
		expire() {
			const { isExpire } = this;

			return !!isExpire;
		}
	},

	methods: {
		clickSingleTabs(params) {
			const { callBack } = params;

			callBack && callBack.call(this);
		},

		changePageScroll() {
			this.isTransform = true;

			this.debounced();
		}
	},

	components: {
		DistributionService
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.layout-main {
	position: fixed;
	right: 36rpx;
	z-index: 9999;
	transition: all 0.3s;
	backface-visibility: hidden;
	@include Db_iosPositionBottomDistance(160rpx);

	width: 100rpx;
	background: #fff;
	box-shadow: 0px 0px 24rpx 0px rgba(51, 51, 51, 0.14);
	border-radius: 32rpx;
	padding: 14rpx 24rpx;

	&-item {
		color: #333;
		font-size: 20rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		padding-bottom: 18rpx;
		padding-top: 12rpx;
		border-top: 2rpx solid #eee;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-bottom: 2rpx;
		}

		&:first-child {
			border-top: none;
			padding-top: 0;
		}

		&:last-child {
			padding-bottom: 0;
		}
	}

	&.expire {
		@include Db_iosPositionBottomDistance(252rpx);
	}

	&.transform {
		opacity: 0.3;
		transform: translateX(90rpx);
	}
}
</style>
